<template>
	<view class="report-box">
		<view class="report-content">
			<view @click="itemClickAction(item)" :class="['wrap-item', activity(item) ? 'active-item' : '']" v-for="(item, index) in list"
			 :key="index">
				<text :class="[activity(item) ? 'active-text' : '']"> {{item}} </text>
			</view>
		</view>

		<view @click="sureAction" class="bottom-btn">
			<text>选择</text>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request/request.js';
	import {
		EventBus
	} from '@/util/event-bus.js';
	export default {
		data() {
			return {
				inputValue: '',
				selectedIndex: -1,
				img_list: [],
				action: request.config.baseUrl + 'user/upload', // 上传地址
				list: ["颜值", "身材", "气质", "责任心", "靠谱", "性格", "收入", "资产", "家庭", "属相", "星座"],
				selectedList: []
			}
		},
		methods: {
			itemClickAction(item) {
				if (this.selectedList.length >= 3){
					uni.showToast({
						title: "最多能选择3项",
						icon: 'none'
					})
					return
				}
				if (this.selectedList.indexOf(item) == '-1') {
					this.selectedList.push(item);
				} else {
					this.selectedList.splice(this.selectedList.indexOf(item), 1)
				}
			},
			activity(item) {
				return this.selectedList.indexOf(item) != '-1'
			},
			sureAction(){
				if (this.selectedList.length === 0) {
					uni.showToast({
						title: "请至少选择一项",
						icon: 'none'
					})
					return
				}
				EventBus.$emit('careSure', this.selectedList);
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.report-box {
		display: flex;
		background-color: #FFFFFF;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		.report-content {
			padding: 50rpx;
			display: flex;
			flex-direction: row;
			width: 100%;
			flex-wrap: wrap;
			.wrap-item {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10rpx;
				width: 196rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32px;
				border: 2rpx solid #E9EBF0;

				text {
					font-size: 26rpx;
					font-weight: 400;
					color: #474A58;
				}

				.active-text {
					color: #FF5998;
				}

			}

			.active-item {
				border: 2rpx solid #FF5998;

			}
		}

		.bottom-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 32rpx;
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #ff5e6a 0%, #ff5e6a 100%);
			border-radius: 50rpx;

			text {
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
